<template>
  <div :style="{fontSize: fs}">
    <template v-if="days>0">
      {{days}} -
    </template>
    {{hour<10?'0'+hour:hour}}:{{minute<10?'0'+minute:minute}}:{{second<10?'0'+second:second}}
  </div>
</template>

<script>
  import moment from 'moment'

  export default {
    name: "NipCountDown",
    props: {
      endTime: {
        type: String,
        default: ""
      },
      fontSize: {
        type: String,
        default: "22px"
      }
    },
    data() {
      return {
        et:this.endTime,
        fs:this.fontSize,
        days: 0,
        hour: 0,
        minute: 0,
        second: 0,
        setInterval: null,
      }
    },
    created() {
      this.countDown(50, this.et);
    },
    mounted() {
    },
    methods: {
      countDown(timeOutNum, objectTime) {
        let lastTime = Date.parse(new Date());
        let oldTime = null;
        let this_ = this;
        this.setInterval = setInterval(function () {
          if (null === oldTime) {
            oldTime = Date.parse(new Date());
          } else {
            let nowTime = Date.parse(new Date());
            if (1000 === nowTime - oldTime) {
              oldTime = nowTime;
              lastTime += 1000;
              let mss = (new moment(objectTime) - lastTime) / 1000;
              this_.days = parseInt(mss / 86400);
              this_.hour = parseInt(mss / 3600 % 24);
              this_.minute = parseInt(mss / 60 % 60);
              this_.second = parseInt(mss % 60);
            }
          }
        }, timeOutNum);
      }
    },
    destroyed() {
      clearInterval(this.setInterval);
    }
  }
</script>

<style scoped>

</style>
